<template>
    <el-dialog v-model="visible" :title="title" @closed="resetData" :close-on-press-escape="false">
        <div class="header">
            <span style="font-size: 14px">
                正在为字典 ' <strong><el-tag>{{fatherDict.name}}</el-tag></strong> ' 添加子项，
                字典编码为：{{fatherDict.code}}。
            </span>
        </div>
        <el-table :data="tableData" :cell-style="{'padding-bottom': 0}">
            <el-table-column label="字典名称">
                <template #default="s">
                    <el-input v-model="s.row.name" placeholder="字典名称" @blur="validateDictName(s.row,s.row.name)"/>
                    <span class="msg-box">{{s.row.valid.name.msg}}</span>
                </template>
            </el-table-column>
            <!--            <el-table-column label="编码">-->
            <!--                <template #default="s">-->
            <!--                    <el-input v-model="s.row.code" placeholder="编码" disabled/>-->
            <!--                </template>-->
            <!--            </el-table-column>-->
            <el-table-column label="备注" width="300">
                <template #default="s">
                    <el-input v-model="s.row.remark" placeholder="备注" type="textarea" :rows="1"/>
                    <span class="msg-box">{{}}</span>
                </template>
            </el-table-column>
            <el-table-column label="状态">
                <template #default="s">
                    <el-switch
                        v-model="s.row.enabled"
                        :active-value="1"
                        :inactive-value="0"
                        active-text="启用"
                        inactive-text="停用"
                        size="small"
                    />
                    <span class="msg-box">{{}}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="90px">
                    <template #default="s">
                        <el-tooltip placement="top" content="添加行">
                            <el-button size="small" type="primary" :icon="Plus" @click="addRow()" circle/>
                        </el-tooltip>
                        <el-tooltip placement="top" content="删除行">
                            <el-button size="small" type="danger" :icon="Minus" @click="removeRow(s.$index)" circle/>
                        </el-tooltip>
                        <span class="msg-box">{{}}</span>
                    </template>
                </el-table-column>
        </el-table>
        <template #footer>
            <el-button type="default" @click="visible=false">取消</el-button>
            <el-button type="primary" @click="submit">确认添加</el-button>
        </template>
    </el-dialog>
</template>

<script>
    import {Plus,Minus} from '@element-plus/icons-vue'
    import {ElMessage} from "element-plus";
    import {addChildren, hasSomeSiblingDict} from "../../../../network/sys/dict";
    import {getCurrentInstance, reactive, ref, toRefs} from "vue";

    export default {
        name: "DictChildren",
        setup(props,{emit}){
            const globalProperties = getCurrentInstance()?.appContext.config.globalProperties;
            const fatherDictManager = reactive({
                fatherDict:{
                    id: null,
                    name: null,
                    code: null,
                    value: null,
                    parentId: null,
                    remark: null,
                    enabled: 1
                },
                setFatherDict({id, name, code, value,parentId,remark,enabled}){
                    fatherDictManager.fatherDict.id = id;
                    fatherDictManager.fatherDict.name = name;
                    fatherDictManager.fatherDict.code = code;
                    fatherDictManager.fatherDict.value = value;
                    fatherDictManager.fatherDict.parentId = parentId;
                    fatherDictManager.fatherDict.remark = remark;
                    fatherDictManager.fatherDict.enabled = enabled;
                }
            })
            const resourceEl = ()=>{
                return {
                    name: null,
                    code: fatherDictManager.fatherDict.code,
                    value: null,
                    parentId: null,
                    remark: null,
                    enabled: 1,
                    valid: {
                        name: {
                            value: false,
                            msg: ''
                        }
                    }
                }
            }
            const visible = ref(false);
            const table = reactive({
                tableData:[resourceEl()],
                addRow(){
                    table.tableData.push(resourceEl());
                },
                removeRow(index){
                    if(table.tableData.length<2){
                        ElMessage.info('不可以再删除了!')
                        return;
                    }
                    table.tableData.splice(index,1);
                },
                resetData(){
                    table.tableData = [resourceEl()];
                },
                async validateDictName (row,value){
                    let column = row.valid.name;
                    if(globalProperties.$utils.isEmpty(value)) {
                        column.msg = '字典名称不能为空。';
                        column.value = false;
                        return;
                    }
                    let hasSameName = false;
                    await hasSomeSiblingDict({
                        name: value,
                        parentId: fatherDictManager.fatherDict.id
                    }).then(vo=>{
                        hasSameName = vo;
                    })
                    if(hasSameName){
                        column.msg = '该目录下已存在有相同名称的字典。'
                        column.value = false;
                        return;
                    }
                    column.msg = '';
                    column.value = true;
                },
                paramsValidate(){
                    // console.log('this.tableData',table.tableData);
                    let flag = true;
                    table.tableData.forEach(e=>{
                        table.validateDictName(e,e.name);
                    })//验证
                    table.tableData.forEach(e=>{
                        let elValid = e.valid;
                        for (let k in elValid) {
                            if(!elValid[k].value){
                                flag = false;
                            }
                        }
                    })//查看验证结果
                    return flag;
                },
                submit(){
                    if(table.paramsValidate()){
                        console.log('提交成功!')
                        addChildren({
                            parentId: fatherDictManager.fatherDict.id,
                            children: table.tableData
                        }).then(vo=>{
                            globalProperties.$response.handle({
                                data: vo,
                                success: '添加成功',
                                error: '添加失败',
                                successFn: ()=>{
                                    emit('refresh-data');
                                    visible.value = false;
                                },
                                log: '添加子字典结果'
                            });
                        })
                    }else{
                        ElMessage.error('表单字段验证失败，请先完善表单字段!')
                    }
                }
            })

            return{
                ...toRefs(table),
                ...toRefs(fatherDictManager),
                visible,
                Plus,
                Minus
            }
        },
        emits:['refresh-data'],
        props:{
            width: '',
        },
        data(){
            return{
                title: ''
            }
        },
        methods:{

        }
    }
</script>

<style scoped>
    .header{
        font-size: 16px;
        padding: 0 0 10px 0;
    }
    .parent_code{
        float: right;
        margin-right: 10px;
    }
    .msg-box{
        font-size: 12px;
        color: red;
        display: block;
        height: 12px;
        line-height: 12px;
    }
</style>
